<template>
<!-- 城市 -->
  <div>
   <van-nav-bar
  title="城市列表"

  left-arrow
  @click-left="onClickLeft"

/>
<van-index-bar :index-list="indexList">
  <van-index-anchor index="当前城市"  />
  <van-cell title="上海" />

  <van-index-anchor index="热门城市" />

  <van-cell :title="item.label"  v-for='item in hotcity' :key='item.value'/>

<div v-for='(item,ins) in Data' :key='ins'>
 <van-index-anchor :index="item.key"  >
 </van-index-anchor>
 <van-cell :title="it" v-for='it in item.value' :key='it'/>
</div>

</van-index-bar>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { cityAPI, cityhotAPI } from '@/api'
export default {
  data () {
    return {
      title: '上海',
      str: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', '  Z'],
      Data: [],
      hotcity: [],
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  methods: {
    onClickLeft () {
      Toast('返回!')
      this.$router.go(-1)
    }
  },
  async created () {
    const res = await cityAPI({ level: 1 })
    const res1 = await cityhotAPI()
    this.hotcity = res1.data.body
    this.Listcity = res.data.body
    const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    const strArr = str.split('')// 用于把一个字符串分割成字符串数组
    strArr.forEach(item => {
      this.Data.push({ key: `${item}`, value: [] })
    })

    this.Listcity.forEach(item => {
      const letter = item.short.charAt(0)// key
      const label = item.label// value
      this.Data.forEach(ele => {
        if (ele.key.toLowerCase() === letter) {
          ele.value.push(label)
        }
      })
    })

    console.log(this.Data)
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-index-bar__sidebar{
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 5px;
    z-index: 1;
    height: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    text-align: center;
    cursor: pointer;
}
/deep/ .van-index-bar__index{
margin-bottom: 7px;
}
  /deep/ .van-icon{
  color:white;
  }
  /deep/ .van-index-anchor{
    color:#999999;
  }
</style>
